<template>
  <div v-loading="loading" element-loading-text="加载中。。。">
    <el-card style="overflow:visible;">
      <el-form :model="form" size="mini" label-position="top" ref="form">
        <el-row :gutter="10">
          <el-col :md="6" :lg="4">
            <el-form-item label="图片号" prop="IMAGENO">
              <el-input v-model="form.IMAGENO" placeholder="请输入图片号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :lg="6" :md="6" class="searchBtnMarginTop">
            <el-button type="primary" icon="el-icon-search" :loading="loading" size="mini" @click="queryModel(1)">查询
            </el-button>
            <el-button type='warning' size='mini' icon='el-icon-refresh' @click="clearForm('form')">重置</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card style="margin-top:10px;">
      <el-row :gutter="10">
        <el-col :lg="12" :md="12" v-if="btnPermission('Button_User_Add')">
          <el-button type="primary" size="mini" @click="addlocalCard" icon="el-icon-plus">新增</el-button>
        <!-- </el-col>
        <el-col :lg='2' :md='3' v-if="btnPermission('Button_DevInfo_Edit')"> -->
          <el-button type='primary' size='mini' icon='el-icon-edit' class='b-button' :disabled="currentRow.length!=1"
            @click='DialogShow'>修改</el-button>
        <!-- </el-col>
        <el-col :lg="2" :md="3" v-if="btnPermission('Button_User_Delete')"> -->
          <el-button type="danger" size="mini" icon="el-icon-delete" @click="del" :disabled="currentRow.length!=1">删除
          </el-button>
        </el-col>

      </el-row>
      <el-table :data="tableData" ref="table" border :span-method="objectSpanMethod" class="tableMarginTop iconManageStyle" highlight-current-row
        @selection-change="handleCurrentChange" header-row-class-name="tableHeaderClass" style="min-height:390px;">
        <el-table-column type="selection" width="40"></el-table-column>
        <el-table-column prop="IMAGENO" label="图片号" align="center"></el-table-column>
        <el-table-column prop="ID" label="编号" align="center"></el-table-column>
        <el-table-column prop="IMAGENAME" label="图片名字"></el-table-column>
        <el-table-column prop="TYPE" label="图片类型">
          <template slot-scope="scope">
            <div>
              {{scope.row.TYPE | typeFormat}}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="IMAGEDESC" label="图片描述"></el-table-column>
        <el-table-column prop="URL" label="路径" width="220" align="center" >
        </el-table-column>
        <el-table-column prop="URL" label="图片" width="120" align="center" >
          <template slot-scope="scope">
            <div style="width:100%;background:#e4eaef;">
             <el-image :src="imgUrl+scope.row.URL"></el-image>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="REMARK1" label="备注1" ></el-table-column>
        <!-- <el-table-column prop="REMARK2" label="备注2"></el-table-column> -->
      </el-table>
      <div style="text-align:right;margin-top:20px;" v-show="this.tableData">
        <el-pagination :current-page="currentPage" background @size-change="handleSizeChange"
          :page-sizes="[10,25,50,100]" :page-size="pageSize" layout="total,sizes, prev, pager, next, jumper"
          :total="totalRcrdNum" @current-change="changePage"></el-pagination>
      </div>
    </el-card>
    <!-- 弹窗 -->
    <keep-alive>
      <component :is="dialogList.addaddlocalCardDialog" :option="dialogOptions" @refreshTable="queryModel(1)">
      </component>
    </keep-alive>
  </div>
</template>

<script>
  import toolBox from "@/common/utils/toolBox";
  import addaddlocalCardDialog from "./dialog/addDialog";
  import requestYg from "@/common/utils/requestYg";
  import getGlobalParams from "@/common/utils/getGlobalParams";
  import query from "@/message/siteManagement/iconManage/iconQuery";
  import del from "@/message/siteManagement/iconManage/iconManage";
  import request from "@/common/utils/requestWFM";
  import dataQuery from '@/message/wfm/baseData/dictionaryManage/dictionaryQuery'

  let that 
  export default {
    name: "",
    beforeCreate: function () {
      that = this;
    },
    filters: {
      typeFormat:(val) => {
        let str = ''
        that.typeOption.forEach(item => {
          if (val == item.FIELDKEY) {
            str = item.FIELDVALUE
          }
        });
        return str
      },
    },
    data() {
      return {
        imgUrl: getGlobalParams.get('ImageDownloadAddress'),
        STATICOBJECTLIST: [{
            name: "坐席",
            value: "agent"
          },
          {
            name: "队列",
            value: "queue"
          },
        ],
        STATUSLIST: [{
            name: "无效",
            value: "0"
          },
          {
            name: "有效",
            value: "1"
          },
        ],
        pageSize: undefined, //表格每页的条数
        form: {
          IMAGENO: "",
          PARAMTYPE: "",
          PARAMNAME: "",
          PARAMKEY: '',
        },
        typeOption: [],
        spanArr:[],
        pos: 0,
        currentRow: [], //表格当前选中行
        currentPage: 1, //表格当前页
        totalRcrdNum: 0,
        tableData: [], //表格 数据
        loading: false, //loading遮罩
        total: 0, //表格总条数
        checkedUser: false, //控制按钮是否可用
        isDisabledDel: false,
        dialogList: {
          //指定被渲染组件列表
          addaddlocalCardDialog,
        },
        dialogOptions: {
          //新增
          isShow: false
        },
      };
    },
    computed: {},
    mounted() {
    },
    created: function () {
      this.pageSize = getGlobalParams.get("PageSize");
      this.queryModel(1);
      this.iconTypeQuery()
    },
    watch: {},
    methods: {
      // icon 类型查询
      async iconTypeQuery() {
        let resBody = new dataQuery();
        resBody.data.FIELDCODE = 'ICONTYPE'
        // resBody.data.FIELDNAME = this.form.name;
        resBody.data.CurrPage = 1
        resBody.data.PageRowNum = 100
        let response = await request(resBody);
        if (response.SYS_HEAD.ReturnCode == "000000") {
          this.typeOption = response.BODY.FIEDATA;
        } else {
          this.$message({
            type: "error",
            message: "请求失败，错误码:" + response.SYS_HEAD.ReturnCode + "，错误信息：" + response.SYS_HEAD.ReturnMessage
          })
        }
      },
      objectSpanMethod({row, column, rowIndex, columnIndex}){
         if (columnIndex === 1) {
            const _row = this.spanArr[rowIndex];
            const _col = _row > 0 ? 1 : 0;
            return {
              rowspan: _row,
              colspan: _col
            }
        }
      },
       getSpanArr(data) {
        for (var i = 0; i < data.length; i++) {
          if (i === 0) {
            this.spanArr.push(1);
            this.pos = 0
          } else {
            // 判断当前元素与上一个元素是否相同
            if (data[i].IMAGENO === data[i - 1].IMAGENO) {
              this.spanArr[this.pos] += 1;
              this.spanArr.push(0);
            } else {
              this.spanArr.push(1);
              this.pos = i;
            }
          }
        }
      },
      async queryModel(num) {
        let data = []
        let data1 = []
        let resBody = new query();
        this.currentPage = num;
        resBody.data.IMAGENO = this.form.IMAGENO;
        resBody.data.PAGEFLAG = 4;
        resBody.data.PAGEROWNUM = this.pageSize;
        resBody.data.CURRPAGE = num;
        requestYg(resBody)
          .then(response => {
            this.totalRcrdNum = response.RSP_BODY.TOTALROWNUM ?
              response.RSP_BODY.TOTALROWNUM :
              0;
            if (response.SYS_HEAD.ReturnCode === "000000") {
              data = response.RSP_BODY.struct || []
              data.forEach(item => {
                item.IMAGEINFO.forEach(element =>{
                  data1.push({
                    ID:element.ID,
                    IMAGENO: item.IMAGENO,
                    IMAGEDESC: element.IMAGEDESC,
                    IMAGENAME: element.IMAGENAME,
                    REMARK1: element.REMARK1,
                    REMARK2: element.REMARK2,
                    TYPE: element.TYPE,
                    URL: element.URL,
                  })
                })
              })
              this.spanArr=[]
              this.tableData = JSON.parse(JSON.stringify(data1));
              this.getSpanArr(data1)
            } else {
              this.$message({
                type: "error",
                message: response.SYS_HEAD.ReturnMessage
              });
              this.tableData = [];
            }
            this.loading = false;
          })
          .catch(error => {
            this.loading = false;
          });
      },
      del() { //删除弹出
        this.$confirm("该坐席状态图标将被删除, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
          .then(() => {
            this.paramDel();
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除"
            });
          });
        this.limstr = "";
      },
      paramDel() { //删除坐席状态图标
        this.loading = true;
        let resBody = new del();
        resBody.data.ID = this.currentRow[0].ID;
        resBody.data.OPERFLAG = 'D'
        requestYg(resBody)
          .then(response => {
            if (response.SYS_HEAD.ReturnCode === "000000") {
              this.loading = false;
              this.$message({
                type: "success",
                message: "坐席状态图标删除成功!"
              });
              this.queryModel(1);
            } else {
              this.loading = false;
              this.$message({
                type: "danger",
                message: "坐席状态图标删除失败!"
              });
            }
          })
          .catch(error => {
            this.loading = false;
          });
      },

      dataFormat(row, column) {
        //格式化表格
        // if (column.property == "STATICOBJECT")
        //   return this.STATICOBJECT[row[column.property]];
        // // 缓存标志
        // if (column.property == "CHACEFLAG")
        //   return this.FLAG[row[column.property]];
        // // 订阅状态
        // if (column.property == "STATUS")
        //   return this.STATUS[row[column.property]];
      },
      addlocalCard() {
        //添加
        this.dialogOptions.isShow = true;
        this.dialogOptions.isChecked = false;
        this.dialogOptions.title = "坐席状态图标新增";
        this.dialogOptions.typeOption = this.typeOption;
        this.dialogOptions.log = "1"; //添加
      },
      DialogShow() {
        this.dialogOptions.isShow = true;
        this.dialogOptions.isChecked = true;
        this.dialogOptions.currentRow = this.currentRow[0];
        // console.log('1111111',this.currentRow[0])
        this.dialogOptions.typeOption = this.typeOption;
        this.dialogOptions.title = "坐席状态图标修改";
        this.dialogOptions.log = "2"; //修改
      },
      // 重置查询条件
      clearForm(item) {
        this.$refs["" + item].resetFields();
      },
      changePage(val) {
        this.currentPage = val;
        this.queryModel(val);
      },
      refreshTable() {
        //刷新数据并清除选中的数据
        // this.businesstypeList();
      },
      handleCurrentChange(val) {
        //表格选中行改变事件设置当前行的值（currentRow）已经改变控制按钮是否可用
        this.currentRow = val;
      },
      handleSizeChange(val) {
        this.pageSize = val;
        this.queryModel(1);
      }
    }
  };

</script>

<style lang="scss">
.iconManageStyle{
  // background-color:#acc !important;
  .el-image__inner{
    vertical-align:middle;
  }
}
</style>
<style lang="scss" scoped>
  .selectTree {
    min-width: 150px;
  }

  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .dialog-text {
    display: inline-block;
    width: 100%;
    text-align: center;
    color: red;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both;
  }

  .el-card {
    width: 100%;
  }

  .el-form-item {
    margin-left: 30px;
  }

  .el-form-item1 {
    margin-left: 10px;
  }

  .box2-button {
    width: 80px;
  }

  .el-card {
    overflow: inherit;
  }

</style>
